<template>
  <view class="number-keyboard">
    <view class="input-container">
      <view class="input_box">
        <view class="inputValue" v-if="isEnid">{{ inputValueD }}</view>
        <view class="inputValue" v-else>{{ inputValue }}</view>
        <view class="tag_info">{{ quantifier }}</view>
      </view>
      <view class="line"></view>
      <view class="class_info">体重</view>
    </view>
    <view class="keyboard_box">
      <view style="display: flex">
        <view class="keyboard">
          <view class="button" v-for="num in numbers" :key="num" @click="appendToInput(num)">
            {{ num }}
          </view>
        </view>
        <view>
          <view @click="deleteLastInput" class="delete-btn">
            <image src="@/static/imgs/delete.png"></image>
          </view>
          <view class="clear_btn" @click="clearInput">全部清除</view>
          <view class="save_btn" @click="saveInput">保存</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { nextTick, ref } from 'vue'
import { showToast } from '@/utils/index'
import { onShow } from '@dcloudio/uni-app'
const inputValue = ref('0.0')
const isEnid = ref(false)
const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, '·'])
const choosed = ref(false)
const emit = defineEmits(['saveInput', 'validate'])
const props = defineProps({
  // 计量单位
  quantifier: {
    type: String,
    default: '公斤',
  },
  inputValueD: {
    type: String,
    default: '0.0',
  },
  // 启动校验规则
  rule: {
    type: Boolean,
    default: false,
  },
})
onShow(() => {
  if (props.inputValueD != '0.0') {
    isEnid.value = true
    inputValue.value = props.inputValueD.toString()
  }
})
async function appendToInput(num) {
  if (isEnid.value) {
    return false
  }
  // 不允许直接点0
  if (num == '·') {
    num = '.'
  }

  if (num == 0 && inputValue.value == '0.0') {
    return
  } else {
    if (inputValue.value === '0.0' && num !== '.') {
      inputValue.value = ''
    }

    if (num === '.') {
      if (!inputValue.value.includes('.')) {
        inputValue.value += '.'
      } else {
        return
      }
    } else {
      console.log(inputValue.value)
      if (Number(inputValue.value + num.toString()) > 999.9) {
        // console.log('最大值999.9')
        showToast('最大值999.9')
        return
      }
      // if (inputValue.value.length > 4) {
      //   return
      // } else
      if (inputValue.value.includes('.')) {
        let arr1 = inputValue.value.split('.')[1]
        if (arr1.length == 2) {
          return
        } else {
          const result = inputValue.value + num
          if (props.rule) {
            emit('validate')
          }
          inputValue.value += num.toString()
          choosed.value = true
        }
      } else {
        const result = inputValue.value + num
        if (props.rule) {
          emit('validate')
        }
        inputValue.value += num.toString()
        choosed.value = true
      }
    }
  }
}

function deleteLastInput() {
  isEnid.value = false
  if (inputValue.value === '0.0') {
    return
  }
  inputValue.value = inputValue.value.slice(0, -1)
  console.log(inputValue.value.length)
  if (!inputValue.value.length) {
    choosed.value = false
    inputValue.value = '0.0'
  }
}

function clearInput() {
  isEnid.value = false
  inputValue.value = '0.0'
}

function saveInput(item) {
  if (inputValue.value.endsWith('.')) {
    deleteLastInput()
  }
  emit('saveInput', inputValue.value)
}
</script>

<style lang="scss" scoped>
.number-keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;

  .input_box {
    // display: flex;
    position: relative;
    .tag_info {
      width: 75rpx;
      height: 36rpx;
      background: #ffffff;
      border-radius: 7rpx 7rpx 7rpx 7rpx;
      border: 1rpx solid #8767ff;
      font-size: 26rpx;
      color: #8767ff;
      text-align: center;
      line-height: 36rpx;
      position: absolute;
      top: 0;
      right: -100rpx;
    }
  }
  .line {
    width: 228rpx;
    height: 4rpx;
    background: #8e70ff;
    // border: 3rpx solid #8E70FF;
  }
  .class_info {
    font-weight: 600;
    font-size: 26rpx;
    color: #8767ff;
    margin-top: 20rpx;
    text-align: center;
  }
}

.input-container .inputValue {
  font-weight: 600;
  font-size: 61rpx;
  color: #8767ff;
  // width: 228rpx;
  // border-bottom: 4rpx solid #8e70ff;
  text-align: center;
  padding-bottom: 10rpx;
}

.keyboard_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  padding: 20rpx 0;
  margin-top: 40rpx;
  padding-bottom: 42rpx;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(3, 160rpx);
  grid-gap: 10px;
}

.button,
.delete-btn,
.clear_btn {
  width: 160rpx;
  height: 71rpx;
  font-weight: 500;
  font-size: 47rpx;
  color: #000000;
  background: #ffffff;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  text-align: center;
  line-height: 71rpx;
  border: none;
}

.decimal-btn {
  grid-column: span 1;
}

.delete-btn {
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 68rpx;
    height: 33rpx;
  }
}

.clear_btn {
  font-size: 20rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.save_btn {
  width: 160rpx;
  height: 162rpx;
  background: #a28aff;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
  line-height: 162rpx;
}
</style>
